<template>
  <div>
    <van-nav-bar
      title="发布房源"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="$router.back()"
    />
    <h4 class="fyxx">房源信息</h4>
    <form action="">
      <div class="name" @click="$router.push('/search')">
        <span>小区名称</span
        ><input
          type="text"
          placeholder="请输入小区名称 "
          v-model="uname"
        /><van-icon name="arrow" />
      </div>
      <div class="price">
        <span>租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</span
        ><input type="text" placeholder="请输入租金 " v-model="price" /><span class="righttxt"
        >￥/月</span
        >
      </div>
      <div class="size">
        <span>建筑面积</span
        ><input type="text" placeholder="请输入建筑面积 "  v-model="size"/><span
          class="righttxt"
        >㎡</span
        >
      </div>
      <div class="huxing" @click="tankuang('huxing')">
        <span>户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</span
        ><input type="text" placeholder="请选择 " v-model="huxing" /><van-icon
          name="arrow"
        />
      </div>
      <div class="floor" @click="tankuang('floor')">
        <span>所在楼层</span
        ><input type="text" placeholder="请选择 " v-model="floor" /><van-icon
          name="arrow"
        />
      </div>
      <div class="chaoxiang" @click="tankuang('chaoxiang')">
        <span>朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向</span
        ><input
          type="text"
          placeholder="请选择 "
          v-model="chaoxiang"
        /><van-icon name="arrow" />
      </div>
    </form>
    <h4 class="bt">房源标题</h4>
    <div class="title">
      <input
        type="text"
        placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
        v-model="titleInfo"
      />
    </div>
    <h4 class="tx">房源图像</h4>
    <div class="title1">
      <van-uploader :after-read="afterRead"  v-model="fileList" multiple />
      <!-- <van-uploader v-model="fileList" multiple /> -->
    </div>
    <h4 class="pz">房源配置</h4>
    <!-- <van-grid square :border="false" :column-num="5" :clickable="true">
      <van-grid-item v-for="value in peitaoList" @click="peitaoChoose($event,value)" :key="value" :text="value" />
    </van-grid> -->
    <ul class="xuanxiang">
      <li
        v-for="(value, index) in peitaoList"
        :class="value.isSelected ? 'active' : ''"
        @click="peitaoChoose(value, index)"
        :key="index"

      >
        <div :class="value.classIcon">

        </div>
        {{ value.name }}
      </li>
    </ul>
    <h4>房源描述</h4>
    <div class="desc">
      <textarea
        name=""
        id=""
        cols="30"
        rows="10"
        placeholder="请输入房屋描述信息"
        v-model="desc"
      ></textarea>
    </div>
    <div class="footer">
      <div class="quxiao">取消</div>
      <div class="sub" @click="imgshangchaun">提交</div>
    </div>
    <!-- 选项 -->

    <!-- <van-cell is-link ></van-cell> -->
    <van-popup v-model="show" @click="showPopup" position="bottom">
      <van-picker
        show-toolbar
        @click="show = !show"
        :columns="columns.map(item=>item.label)"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { fabuImg, fabuHouse, fabuHouseReel } from '@/api/house'
export default {
  name: 'FangYuan',
  data () {
    return {
      // 图片上传
      data: new FormData(),
      fileList: [],
      // 小区名字
      uname: '',
      community: this.$route.query.community,
      show: false,
      // roomType
      huxing: '',
      huxingStr: '',
      // 楼层
      floor: '',
      floorStr: '',
      // 朝向
      chaoxiang: '',
      chaoxiangStr: '',
      // title
      titleInfo: '',
      // 描述
      desc: '',
      price: '',
      size: '',
      // peitaoList: ['衣柜', '洗衣机', '空调', '天然气', '冰箱', '暖气', '电视', '热水器', '宽带', '沙发'],
      peitaoList: [
        { name: '衣柜', isSelected: false, classIcon: 'iconfont icon-yigui-hui' },
        { name: '洗衣机', isSelected: false, classIcon: 'iconfont icon-xiyiji' },
        { name: '空调', isSelected: false, classIcon: 'iconfont icon-kongdiao' },
        { name: '天然气', isSelected: false, classIcon: 'iconfont icon-tianranqi' },
        { name: '冰箱', isSelected: false, classIcon: 'iconfont icon-bingxiang' },
        { name: '暖气', isSelected: false, classIcon: 'iconfont icon-nuanqi' },
        { name: '电视', isSelected: false, classIcon: 'iconfont icon-dianshi' },
        { name: '热水器', isSelected: false, classIcon: 'iconfont icon-haofangtuo400iconfont2reshuiqi' },
        { name: '宽带', isSelected: false, classIcon: 'iconfont icon-wifi' },
        { name: '沙发', isSelected: false, classIcon: 'iconfont icon-shafa' }
      ],
      // 配套参数
      peitaoChooseList: [],
      peitaoStr: '',
      columns: [],
      // 配套切换
      peitaoColumns: {},
      actionNum: false,
      // 图片字符串
      imgListStr: ''
    }
  },
  async created () {
    this.uname = this.$route.query.communityName
    // 发布房源所需条件
    const res = await fabuHouse()
    // console.log(res.body)
    this.peitaoColumns = res.body
    // console.log(this.peitaoColumns)
    // console.log(this.$route.query.communityName)
  },
  methods: {
    // 拿到选项数据
    onConfirm (value, index) {
      if (this.columns.length === 5) {
        this.huxing = value
        this.huxingStr = this.columns[index].value
        console.log(this.huxingStr)
      } else if (this.columns.length === 3) {
        this.floor = value
        this.floorStr = this.columns[index].value
        console.log(this.floorStr)
      } else {
        this.chaoxiang = value
        this.chaoxiangStr = this.columns[index].value
        console.log(this.chaoxiangStr)
      }
    },
    showPopup () {
      this.show = !this.show
    },
    // 切换选项列表
    tankuang (val) {
      if (val === 'huxing') {
        this.columns = this.peitaoColumns.roomType.map(item => item)
      } else if (val === 'floor') {
        // 楼层
        this.columns = this.peitaoColumns.floor.map(item => item)
      } else {
        // 朝向
        this.columns = this.peitaoColumns.oriented.map(item => item)
      }
      this.show = !this.show
    },
    // 房屋配置
    peitaoChoose (value, index) {
      value.isSelected = !value.isSelected
      if (value.isSelected === true) {
        this.peitaoChooseList.push(value.name)
      } else {
        this.peitaoChooseList = this.peitaoChooseList.filter(item => item !== value.name)
      }
      this.peitaoStr = this.peitaoChooseList.join('|')
    },
    // 上传文件
    afterRead (file) {
      this.data.append('file', file.file)
    },
    async imgshangchaun () {
      const imgList = await fabuImg(this.data)

      // 上传头像
      // 处理头像数据
      imgList.body.forEach((item, i) => {
        if (i < imgList.body.length - 1) {
          item = item + '|'
        }
        this.imgListStr += item
      })
      // console.log(this.imgListStr)

      // 发布房源
      const obj = {
        title: this.titleInfo,
        description: this.desc,
        houseImg: this.imgListStr,
        oriented: this.chaoxiangStr,
        supporting: this.peitaoStr,
        price: this.price,
        roomType: this.huxingStr,
        size: this.size,
        floor: this.floorStr,
        community: this.community
      }
      console.log(obj.supporting)
      await fabuHouseReel(obj)
      this.$dialog.confirm({
        title: '提示',
        message: '房源发布成功！',
        confirmButtonText: '继续发布',
        confirmButtonColor: '#1e95ea',
        cancelButtonText: '去查看'
      })
        .then(() => {
          // on confirm
          this.$router.go('0')
        })
        .catch(() => {
          // on cancel
          this.$router.push('/myhouse')
        })
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.iconfont{
  font-size: 28px;
}
.active {
  color: #21b97a !important;
}
input {
  border: 0;
  // background-color: aqua;
}
form div {
  padding: 10px;
  font-size: 16px;
}
.footer {
  position: fixed;
  bottom: 0;
  display: flex;
  height: 46px;
  width: 100%;
  text-align: center;
  line-height: 46px;
  .quxiao {
    width: 50%;
    background-color: #fff;
    color: #21b97a;
  }
  .sub {
    width: 50%;
    background-color: #21b97a;
    color: #fff;
  }
}
h4 {
  font-weight: normal;
  padding: 10px;
}
.fyxx {
  color: #21b97a;
  border-bottom: 1px solid #e1dcdc;
}

.desc {
  border-bottom: 50px solid #f5f5f9;
  margin-bottom: 20px;
  width: 100%;
  textarea {
    width: 95%;
    border: 0;
    margin: 10px;
    // background-color: #21b97a;
    height: 150px;
  }
}
.price,
.size {
  input {
    margin-left: 20px;
    width: 230px;
  }
}
.size {
  input {
    width: 250px;
  }
}
.floor,
.huxing,
.chaoxiang {
  // background-color: #21b97a;
  input {
    width: 76%;
    text-indent: 210px;
  }
}
.name {
  input {
    width: 76%;
    text-indent: 150px;
  }
}
.title {
  input {
    width: 100%;
    text-indent: 10px;
    margin-bottom: 15px;
  }
}
.bt,
.tx,
.pz {
  border-bottom: 1px solid #e3dede;
  margin-bottom: 10px;
}
.pz {
  margin-top: 10px;
}
.title1 {
  padding-left: 8px;
}
::placeholder {
  color: #a29e9e;
}
.van-picker {
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 100%;
}
/deep/ .van-picker__toolbar button {
  font-size: 17px;
  color: #108ee9;
}
.xuanxiang {
  // background-color: #108ee9;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: space-around;
  li {
    width: 20%;
    text-align: center;
  }
}
</style>
